var main = {
  _target: 'body',
  _tW: 0,
  _tH: 0,
  _style: {},
  _size: 0,
  div: null,
  index: null,
  _opt: {
    tpl_id: 0,
    type: 10,
    //定位类型
    position: 10,
    //位置
    value: 50,
    //位置调整
    size: 50,
    //大小
    imgSrc: '',
    text: '',
    jumpSrc: '',
    textcolor: '',
    imageUrl: ''
  },
  loadScript(src) {
    const hm = document.createElement("script");
    hm.src = src;
    const s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    return hm;
  },
  loadStyle(src) {
    const hm = document.createElement("link");
    hm.rel = "stylesheet";
    hm.href = src;
    const s = document.getElementsByTagName("link")[0];
    s.parentNode.insertBefore(hm, s);
    return hm;
  },
  init(params) {
    this._opt = Object.assign(this._opt, params);
    if (this._opt.imgSrc) {
      this.loadScript('//unpkg.com/layui@2.9.7/dist/layui.js').onload = () => {
        this.loadStyle('//unpkg.com/layui@2.9.7/dist/css/layui.css').onload = () => {
          if (this._opt.imageUrl) {
            this.index = layer.open({
              type: 1,
              // title: false,
              title: ['微信认证', 'color:green'],
              offset: 'b',
              anim: 'slideUp',
              // 从下往上
              // area: ['100%'],
              area: ['100%', '360px'],
              shade: 0.1,
              shadeClose: false,
              // closeBtn: false,
              closeBtn: params.closeBtn || 0,
              end: params.end,
              content: '<div style="background-image: url(' + this._opt.imageUrl + ');height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;text-align: center;"><div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"><img style="width: 30vw;height: 30vw;display: block;padding-top: 80px;padding-right: 2px;" src="' + this._opt.imgSrc + '" alt=""></div></div>'
            });
          } else {
            this.index = layer.open({
              type: 1,
              title: ['微信认证', 'color:green'],
              offset: 'b',
              anim: 'slideUp',
              // 从下往上
              area: ['100%'],
              shade: 0.1,
              shadeClose: false,
              closeBtn: params.closeBtn || 0,
              end: params.end,
              content: '<div style="padding-bottom: 20px;margin: auto;text-align: center;"><p style="font-weight: bold;font-size: 22px">首次播放，需长按二维码</p><p style="color:#898989;font-size:18px;margin: 5px">添加本书客服老师</p><p style="color:#898989;font-size:14px;margin: 5px">如遇到网络卡顿。请反馈微信客服，获取一对一解决方案。</p><div style="margin:auto;padding: 10px;width: 30vw;height: 30vw"><img width="100%" height="100%"  src="' + this._opt.imgSrc + '" alt=""></div><p style="font-size: 14;margin-top:5px;color:#898989;">添加后即可继续播放</p></div>'
            });
          }
          document.querySelector('.layui-layer-setwin span').style.color = this._opt.textcolor || '#aaaaaa';
          this.close = () =>{ layer.close(this.index) };
        };
      };
    }
    return;
  },
  _styleSize() {
    this._size = 0;
    switch (this._opt.tpl_id) {
      case 0:
        this._size = this._tW * 0.3;
        break;
      case 1:
        this._size = this._tW;
        break;
    }
    if (this._opt.type === 10) {
      const w = this._opt.position === 20 || this._opt.position === 40 ? this._tH : this._tW;
      this._size += (w - this._size) * (this._opt.size / 100);
    }
  },
  //获取位置值
  _stylePosition() {
    if (this._opt.type === 10) {
      //位置
      this.div.style.position = 'fixed';
      let value = this._opt.value;
      let w = this._opt.position === 20 || this._opt.position === 40 ? this._tH : this._tW;
      value = (w - this._size) * (value / 100) + 'px';
      switch (this._opt.position) {
        case 10:
          //top
          this.div.style.top = 0;
          this.div.style.left = value;
          break;
        case 20:
          //left
          this.div.style.left = 0;
          this.div.style.top = value;
          break;
        case 30:
          //bottom
          this.div.style.bottom = 0;
          this.div.style.left = value;
          break;
        case 40:
          //right
          this.div.style.right = 0;
          this.div.style.top = value;
          break;
      }
    }
  },
  _teacherQrcodeDiv() {
    this._style = {
      // border:'1px solid #ccc',
      backgroundColor: 'rgba(0, 0, 0, 0.08)',
      zIndex: '1',
      padding: '5px'
    };
    const img = document.createElement('img');
    img.style.width = this._size - 10 + 'px';
    img.src = this._opt.imgSrc;
    this.div.appendChild(img);
    const text = document.createElement('div');
    text.style.wordBreak = 'break-all';
    text.style.textAlign = 'center';
    text.innerText = this._opt.text;
    if (this._opt.type === 10) {
      text.style.width = this._size - 10 + 'px';
      text.style.color = '#fff';
    }
    this.div.appendChild(text);
  },
  _bannerDiv() {
    this._style = {
      width: '100vw',
      // border:'3px dashed rgb(19 184 230)',
      backgroundColor: 'rgba(0, 0, 0, 0.08)',
      textAlign: 'center'
    };
    const _this = this;
    if (this._opt.jumpSrc.length > 0) {
      this.div.addEventListener('click', e => {
        window.open(_this._opt.jumpSrc);
      });
    }
    if (this._opt.imgSrc) {
      const img = document.createElement('img');
      img.style.width = "100%";
      img.style.margin = 'auto';
      img.src = this._opt.imgSrc;
      this.div.appendChild(img);
    }
  }
};

export { main as default };
